<template>
	<view>
		<uni-nav-bar title="快速交易区" left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true"
			:border="false"></uni-nav-bar>
		<div class="px-20 py-20" style="background: #F8F8F8;">
			<view class="jindou flex items-center flex-col mt-16 bg-FFF round-16 p-32">
				<view class="font-600">
					最近七日价格走势图
				</view>
				<view class="mt-12" style="color: #FD212C;">
					X:日期 Y:价格
				</view>
				<view class="charts-box mt-12">
					<!-- #ifdef APP-PLUS || H5 -->
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					<!-- #endif -->
					<!-- #ifdef MP -->
					<qiun-data-charts type="area" :opts="opts" :canvas2d="true" :chartData="chartData" />
					<!-- #endif -->
				</view>
			</view>
			
		</div>
		<u-modal :show="modalShow" title="兑换说明" content='兑换时间:周一至周六，10.00-18.00!' @confirm="modalShow = false"></u-modal>
		
		<view class="mt-16 bg-FFF round-16 py-28 px-12" v-if="todayPrice">
			<view class="flex items-center justify-between">
				<view class="text-36 font-700">
					兑换分红
				</view>
				<view class="flex align-end" style="color: #999999;">
					<view class="">
						今日预计收入
					</view>
		
					<view class="text-36 font-700 px-12" style="color: #FF561D;border-bottom: 2rpx dashed #999999;">
						{{todayPrice.averagePrice}}
					</view>
		
					<view class="">
						个金豆
					</view>
				</view>
			</view>
		
			<view class="mt-36 flex items-center justify-between">
				<view class="fenhong flex items-center justify-between px-20">
					<view class="" style="color: #CB8C77;">
						分红总额
					</view>
					<view class="text-36 font-700" style="color: #FF561D;">
						{{todayPrice.totalPrice}}
					</view>
				</view>
				<view class="fenhong flex items-center justify-between px-20">
					<view class="" style="color: #CB8C77;">
						分红总人数
					</view>
					<view class="text-36 font-700" style="color: #FF561D;">
						{{todayPrice.userNum}}
					</view>
				</view>
			</view>
		
			<view class="round-8 px-20  flex items-center justify-between mt-16"
				style="background-color: #FFE7DF;height: 80rpx;">
				<view class="" style="color: #CB8C77;">
					我的分红
				</view>
				<view class="text-36 font-700" style="color: #FF561D;">
					{{todayPrice.selfPrice}}
				</view>
			</view>
		</view>
		
		<view class="transaction mt-32 round-16">
			<view class="px-16  flex items-center justify-between transaction-nav">
				<view class="text-36 font-700">
					兑换专区
				</view>
				<view class="transaction-nav-btn flex items-center" @click="modalShow = true">
					<u-icon name="info-circle" color="#FFF" :bold="true"></u-icon>
					<view class="text-32 text-FFF ml-12">
						兑换说明
					</view>
				</view>
			</view>
		
			<view class="px-12 flex items-center justify-between flex-wrap mt-20 " v-if="voucherInfo">
				<div class="duihuan zongcai p-32" @click="handleVoucher(3)">
					<div class="text-32">
						总裁兑换区
					</div>
					<div class="text-24 mt-10" style="color: #525A59;">
						{{voucherInfo.zongcai ? '今日已领取' : '今日未领取'}}
					</div>
					<div class="duihuan-btn mt-24 round-12" style="background: #FFAC97;">
						兑换
					</div>
				</div>
				<div class="duihuan zongjian p-32" @click="handleVoucher(2)">
					<div class="text-32">
						总监兑换区
					</div>
					<div class="text-24 mt-10" style="color: #525A59;">
						{{voucherInfo.zongjian ? '今日已领取' : '今日未领取'}}
					</div>
					<div class="duihuan-btn mt-24 round-12" style="background: #7D9EFF;">
						兑换
					</div>
				</div>
				<div class="duihuan jingli p-32" @click="handleVoucher(1)">
					<div class="text-32">
						经理兑换区
					</div>
					<div class="text-24 mt-10" style="color: #525A59;">
						{{voucherInfo.jingli ? '今日已领取' : '今日未领取'}}
					</div>
					<div class="duihuan-btn mt-24 round-12" style="background: #EDC556;">
						兑换
					</div>
				</div>
				<div class="duihuan huiyuan p-32" @click="handleVoucher(0)">
					<div class="text-32">
						会员兑换区
					</div>
					<div class="text-24 mt-10" style="color: #525A59;">
						{{voucherInfo.huiyuan ? '今日已领取' : '今日未领取'}}
					</div>
					<div class="duihuan-btn mt-24 round-12" style="background: #A1A1A1;">
						兑换
					</div>
				</div>
			</view>
		</view>
		
		<view class="px-32">
			<view class="transaction-list">
				
				
				<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
					<view class="mt-24" v-for="(item,index) in list" :key="item.id">
						<view class="flex items-center justify-between">
							<view class="">
								{{item.createUserTemp.nickName}}—求购{{item.needJindouNum}}个金豆
							</view>
							<view class="" style="color: #FF561D;">
								求购单价:{{item.todayPrice}}
							</view>
						</view>

						<view class="mt-28 flex items-center justify-between">
							<input type="number" class="input px-28" placeholder="输入数量" v-model="item.sellValue"
								@input="sellChange" />
							<view class="self ml-24 text-32 font-500 text-center" @click="handleSell(item)" :style="{
								background: item.sellValue ? 'linear-gradient(180deg, #FF561D 33%, #FF0064 100%)' : '#F0F0F0',
								color: item.sellValue ? '#FFF' : '#9E9E9E'
							}">
								卖出
							</view>
						</view>
					</view>
				</s-pull-scroll>
			</view>

			<view class="" style="height: 150rpx;">

			</view>
		</view>

		<div class="footer px-32 flex items-center justify-between iphoneX">
			<div class="btn" @click="handleBuy">
				我要买豆
			</div>

			<div class="btn" @click="$tab.nav(`/pages/property/order`)">
				我的订单
			</div>
		</div>


		<u-popup :show="soldShow" bgColor="transparent" mode="center" @close="soldShow = false"
			:safe-area-inset-bottom="false">
			<view class="soldWrap flex flex-col items-center">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/icon_quxiao@2x.png" mode=""
					class="quxiao" @click="soldShow = false"></image>

				<view class="soldContent mt-48 py-48 flex flex-col justify-between items-center">
					<input type="number" class="input text-center" placeholder="请输入购买单价"
						placeholder-style="color:#997983" v-model="jindouPrice" @input="soldValueChange" />

					<input type="number" class="input text-center mt-32" placeholder="请输入购买数量"
						placeholder-style="color:#997983" v-model="soldValue" @input="soldValueChange" />

					<view class="input text-center mt-32" style="color: #997983;">
						{{soldContent}}
					</view>
				</view>

				<view class="soldConfirm text-FFF text-center text-32" @click="handleRelease">
					立即发布
				</view>
			</view>
		</u-popup>

		<payWay :payShow="payShow" @payWayConfirm="payWayConfirm" @payClose="payShow = false"></payWay>

		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(),pay_password = false">
					确认
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="voucherShow" @close="voucherShow = false" mode="center" round="24">
			<div class="py-48">
				<div class="text-center text-32 relative">
					兑换专区
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/icon_quxiao@2x.png" mode=""
						class="quxiao" @click="voucherShow = false"></image>
				</div>
		
				<view class="transaction-list-2 mt-20 px-12">
					<s-pull-scroll ref="transaction" :pullDown="pullDown1" :pullUp="loadData1" :fixed="false">
						<view class="mt-24" v-for="(item,index) in voucherList" :key="item.id">
							<view class="flex items-center justify-between">
								<view class="t-t-l">
									<image :src="globalConfig.imagePrefix + item.cover" mode=""></image>
									<view class="flex items-center justify-between box-1">
										<scroll-view scroll-x style="white-space: nowrap;width: 250rpx;">
											<view class="" style="">
												{{item.name}}
											</view>
										</scroll-view>
		
										<view class="" style="color: #FD212C;">
											￥{{item.price}} 元
										</view>
									</view>
								</view>
		
								<view class="t-t-r" @click="exchange(item)">
									兑换
								</view>
							</view>
						</view>
					</s-pull-scroll>
				</view>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		throttle
	} from "throttle-debounce";
	import payWay from "@/components/payWay.vue"
	var thro;
	export default {
		components: {
			payWay
		},
		data() {
			return {
				list: [],
				soldShow: false,


				sellId: null,
				sellValue: null,
				payShow: false,
				pay_password: false,
				payPassword: "",
				soldShow: false,
				soldContent: "预计支付金额",
				soldValue: "",
				jindouPrice: "",
				
				opts: {
					canvas2d: true,
					legend: {
						show: false,
					},
					yAxis: {
						data: [{
							min: 1
						}]
					},
					extra: {
						area: {
							type: 'curve',
							addLine: true,
							gradient: true
						},
					}
				},
				chartData: {},
				modalShow: false,
				
				voucherShow: false,
				globalConfig: getApp().globalData.config,
				voucherInfo: null,
				voucherList:[],
				todayPrice: null,
				addressId: null,
				mallSpuId:null
			};
		},
		onLoad() {
			thro = this
			this.getData()
			this.refresh()
		},
		onShow() {
			let addressData = uni.getStorageSync('exchangeAddress')
			
			if (addressData && thro.mallSpuId) {
				thro.exchangeFun(addressData)
			}
		},
		methods: {
			async exchangeFun(address) {
				thro.$Api.index.marketVoucherexchange({
					id: thro.mallSpuId,
					addressId: address.id
				}).then(() => {
					uni.removeStorageSync('exchangeAddress')
					uni.showModal({
						title: '提示',
						content: '兑换成功,是否跳转订单详情?',
						cancelText: "否",
						confirmText: "是",
						success: (con2) => {
							if (con2.confirm) {
								thro.$tab.nav(`/pages/mine/order/orderDetail?id=${res.data}`)
							}
						}
					})
				}).catch((err) => {
					uni.removeStorageSync('exchangeAddress')
				})
			},
			exchange: throttle(2000, async (item) => {
				thro.voucherShow = false
				if (!thro.addressId) {
					thro.$modal.confirm('暂无默认地址!是否去添加?').then(con => {
						if (con) {
							thro.$tab.nav(`/pages/mine/address/add`)
						}
					})
					return
				}
			
				uni.showModal({
					title: '兑换商品',
					content: "兑换该商品是否使用默认地址?",
					cancelText: "否",
					confirmText: "是",
					success: async (con1) => {
						if (con1.confirm) {
							const res = await thro.$Api.index.marketVoucherexchange({
								id: item.id,
								addressId: thro.addressId
							})
			
							uni.showModal({
								title: '提示',
								content: '兑换成功,是否跳转订单详情?',
								cancelText: "否",
								confirmText: "是",
								success: (con2) => {
									if (con2.confirm) {
										thro.$tab.nav(
											`/pages/mine/order/orderDetail?id=${res.data}`
											)
									}
								}
							})
						} else {
							thro.mallSpuId = item.id
							thro.$tab.nav(`/pages/mine/address/list?type=2`)
						}
					}
				})
			},{
				noTrailing:true
			}),
			refresh1() {
				thro.$nextTick(() => {
					thro.$refs.transaction.refresh();
				});
			},
			pullDown1(pullScroll) {
				setTimeout(() => {
					thro.loadData1(pullScroll);
				}, 200);
			},
			loadData1(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						thro.voucherList = [];
					}
			
					const curList = await thro.$Api.index.marketVoucherList({
						pageSize: 10,
						pageNum: pullScroll.page,
						isIntegral: thro.isIntegral
					})
			
					thro.voucherList = thro.voucherList.concat(curList.rows || []);
			
					console.log(thro.voucherList)
			
					if (curList.total == 0) {
						pullScroll.empty()
					}
			
					if (thro.voucherList.length >= curList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			handleVoucher(isIntegral) {
				thro.isIntegral = isIntegral
				thro.voucherShow = true
				thro.$nextTick(() => {
					thro.refresh1()
				})
			},
			async getData(){
				const info = await thro.$Api.index.getVoucherInfo()
				thro.voucherInfo = info
				
				const address = await thro.$Api.index.getDefaultAddress()
				thro.addressId = address.data.id
				
				const res = await thro.$Api.index.marketDivideInfo()
				thro.todayPrice = res
				
				const chart = await thro.$Api.property.jindouChart()
				thro.opts.yAxis.data[0].min = chart.prices[0]
				let linearareadata = {
					categories: chart.dates,
					series: [{
						name: "",
						color: "#FF8B43",
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#FF8B43' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						data: chart.prices,
					}],
				}
				thro.chartData = JSON.parse(JSON.stringify(linearareadata));
			},
			confirmOrder: throttle(2000, async () => {
				thro.pay_password = false
				if (!thro.payPassword || thro.payPassword.length != 6) {
					thro.$modal.msg('请输入支付密码!')
					return
				}

				// #ifdef APP || H5
				let form = {
					id: thro.sellId,
					payNum: thro.sellValue,
					payPassword: thro.payPassword
				}
				// #endif

				// #ifdef MP-WEIXIN
				let form = {
					id: thro.sellId,
					payNum: thro.sellValue,
					payPassword: thro.payPassword,
					receiveType: 0
				}
				// #endif
				const res = await thro.$Api.property.marketReceive(form)
				thro.payPassword = ""
				thro.$modal.msg('卖出成功!')
				thro.refresh()
			},{
				noTrailing:true
			}),
			isInteger(obj) {
				return typeof obj === 'number' && obj % 1 === 0
			},
			async soldValueChange() {
				if (!this.soldValue || !this.jindouPrice) {
					return
				}
				if (this.soldValue <= 0 || !this.isInteger(Number(this.soldValue))) {
					this.soldValue = null
					this.$modal.msg('请输入大于等于1的整数!')
					return
				}
				if (this.soldValue == "" || !this.soldValue) {
					this.soldContent = "预计支付金额"
					return
				}
				const res = await this.$Api.property.countNum({
					price: this.soldValue,
					jindouPrice: this.jindouPrice
				})
				this.soldContent = res
			},
			handleBuy() {
				this.soldContent = "预计支付金额"
				this.soldValue = ""
				this.jindouPrice = ""
				this.soldShow = true
			},
			handleRelease() {
				if (this.soldValue <= 0 || !this.isInteger(Number(this.soldValue))) {
					this.soldValue = null
					this.$modal.msg('请输入大于等于1的整数!')
					return
				}
				this.soldShow = false
				this.payShow = true
			},
			async payWayConfirm(e) {
				this.payShow = false

				const res = await this.$Api.property.publish({
					needNum: this.soldValue,
					payWay: e,
					jindouPrice: this.jindouPrice
				})

				if (e == 2 || e == 0) {
					const wxPay = this.$pay.WeChatPay(res)
				} else {
					const alyPay = this.$pay.Alipay(res.data)
				}
			},
			sellChange() {
				this.list.splice(0, 0)
			},
			async handleSell(row) {
				// #ifdef APP || H5
				if (!this.$store.getters.userInfo.zfbOpenId) {
					this.$modal.confirm('请先完成支付宝登录校验，方便卖出成功后转账到您的支付宝!').then(con => {
						if (con) {
							this.$tab.nav(`/pages/mine/setting/account`)
						}
					})
					return
				}
				// #endif

				// #ifdef MP-WEIXIN
				if (!this.$store.getters.userInfo.zfbOpenId) {
					this.$modal.msg('请先在app端绑定支付宝账户!')
					return
				}
				// #endif

				if (!row.sellValue || row.sellValue == "" || row.sellValue <= 0 || !this.isInteger(Number(row
						.sellValue))) {
					this.$modal.msg('请输入大于等于1的整数')
					return
				}

				if (row.sellValue > row.needJindouNum) {
					this.$modal.msg('卖出数量大于求购数量!')
					return
				}

				this.sellId = row.id
				this.sellValue = row.sellValue
				this.payShow = false
				this.pay_password = true
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const curList = await this.$Api.property.marketList({
						pageSize: 10,
						pageNum: pullScroll.page
					})

					this.list = this.list.concat(curList.rows || []);

					this.list.forEach(item => {
						item.sellValue = ""
					})

					if (curList.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= curList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
	
	.quxiao {
		position: absolute;
		top: -18rpx;
		right: 32rpx;
		width: 64rpx;
		height: 64rpx;
	}
	
	.duihuan {
		width: 336rpx;
		height: 196rpx;
		margin-bottom: 32rpx;
	}
	
	.duihuan-btn {
		width: 96rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FFF;
	}
	
	.zongcai {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/zongcai@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.zongjian {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/zongjie@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.jingli {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/jingli@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.huiyuan {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/huiyuan@2x.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.fenhong {
		width: 336rpx;
		height: 80rpx;
		background: #FFE7DF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.transaction-list {
		.input {
			width: 454rpx;
			height: 72rpx;
			background: #F0F0F0;
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 72rpx;
		}

		.self {
			width: 172rpx;
			height: 72rpx;
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 72rpx;
		}
		
		
	}
	
	.jindou {
		.charts-box {
			width: 100%;
			height: 314rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
	}

	.soldWrap {
		width: 686rpx;
		height: 1088rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages4/img_fabuqiugou@2x.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -100rpx;
		padding: 468rpx 0 48rpx 0;

		.quxiao {
			position: absolute;
			top: 272rpx;
			right: 32rpx;
			width: 64rpx;
			height: 64rpx;
		}

		.soldContent {
			width: 622rpx;
			background: #FCF4F7;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4DEE5;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				line-height: 88rpx;

			}
		}

		.soldConfirm {
			width: 322rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 88rpx;
			margin-top: 32rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 46rpx;
		left: 0;
		width: 100%;

		.btn {
			width: 322rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFF;
		}
	}
	
	.transaction {
		background-color: #FFF;
	
		.transaction-nav {
			background: linear-gradient(180deg, #FFF2EE 0%, rgba(255, 255, 255, 0) 100%);
	
			.transaction-nav-btn {
				width: 240rpx;
				height: 72rpx;
				padding: 16rpx 0 16rpx 50rpx;
				background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/shanghuo_bg@2x.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	
	
	}
	
	.transaction-list-2 {
		width: 710rpx;
		height: 630rpx;
	
		.t-t-l {
			position: relative;
			height: 108rpx;
	
			image {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				position: relative;
				z-index: 9;
			}
	
			.box-1 {
				width: 462rpx;
				height: 72rpx;
				background: #F0F0F0;
				border-radius: 356rpx 356rpx 356rpx 356rpx;
				line-height: 72rpx;
				padding-left: 78rpx;
				padding-right: 20rpx;
				position: absolute;
				left: 50rpx;
				top: 18rpx;
			}
		}
	
		.t-t-r {
			width: 132rpx;
			height: 72rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 72rpx;
			text-align: center;
			color: #FFF;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>